<template>
	<view class="container">
		<!-- 顶部自定义导航栏 -->
		<view class="navbar">
			<view class="title">学之思</view>
			<view class="icons">
				<view class="icon more"></view>
				<view class="icon circle"></view>
			</view>
		</view>

		<!-- 个人信息卡片 -->
		<view class="profile-card">
			<image class="avatar" src="/static/admin.jpg" mode="aspectFill" />
      <view class="nickname">{{ userInfo.realName || userInfo.userName || '未登录' }}</view>
		</view>

		<!-- 功能列表 -->
		<view class="list">
			<view class="list-item">
				<uni-icons type="person-filled" ></uni-icons>
				<text class="label">个人资料</text>
				<text class="arrow">&gt;</text>
			</view>
			<view class="list-item">
        <uni-icons type="star-filled" ></uni-icons>
				<text class="label">个人动态</text>
				<text class="arrow">&gt;</text>
			</view>
			<view class="list-item">
				<uni-icons type="chat-filled" ></uni-icons>
				<text class="label">消息</text>
				<text class="arrow">&gt;</text>
			</view>
			<view class="list-item">
		<uni-icons type="color-filled" ></uni-icons>
				<text class="label">设置</text>
				<text class="arrow">&gt;</text>
			</view>
			<view class="list-item">
				<uni-icons type="hand-up-filled" ></uni-icons>
				<text class="label">反馈</text>
				<text class="arrow">&gt;</text>
			</view>
			<view class="list-item">
        <uni-icons type="info-filled" ></uni-icons>
				<text class="label">关于</text>
				<text class="arrow">&gt;</text>
			</view>
		</view>

		<!-- 退出账号 -->
    <view class="logout" @click="logout">
			<uni-icons type="trash-filled" ></uni-icons>
			<text class="logout-text">退出账号</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import http from '../../http.js'
const userInfo = ref({})
async function fetchUserInfo() {
  const res = await http({ url: '/student/user/current', method: 'post' })
  console.log('用户信息接口返回', res)
  if (res && res.response) userInfo.value = res.response
}
async function logout() {
  await http({ url: '/user/logout', method: 'post' })
  uni.reLaunch({ url: '/pages/index/index' })
}
onMounted(fetchUserInfo)
</script>

<style scoped>
.container {
	background: #fafbfc;
	min-height: 100vh;
}

.navbar {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	background: #fff;
	border-bottom: 1px solid #f0f0f0;
}

.title {
	font-size: 20px;
	font-weight: bold;
	color: #222;
}

.icons {
	display: flex;
	align-items: center;
	gap: 12px;
}

.icon.more {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #eee;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon.circle {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid #222;
}

.profile-card {
	width: 100%;
	background: #5b9cf6;
	display: flex;
	align-items: center;
	padding: 24px 0 24px 24px;
	gap: 18px;
}

.avatar {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: #fff;
}

.nickname {
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}

.list {
	background: #fff;
	margin-top: 12px;
	border-radius: 8px;
	overflow: hidden;
}

.list-item {
	display: flex;
	align-items: center;
	padding: 14px 16px;
	font-size: 16px;
	color: #222;
	border-bottom: 1px solid #f5f5f5;
}

.list-item:last-child {
	border-bottom: none;
}

.iconfont {
	font-size: 20px;
	color: #222;
	margin-right: 12px;
}

.label {
	flex: 1;
}

.arrow {
	color: #bbb;
	font-size: 18px;
}

.logout {
	margin: 24px 0 0 0;
	background: #fff;
	display: flex;
	align-items: center;
	padding: 14px 16px;
	color: #f56c6c;
	font-size: 16px;
	border-radius: 8px;
	gap: 10px;
  width: 100%;
  margin-left: 0;
}

.logout .iconfont {
	color: #f56c6c;
}

.logout-text {
	font-weight: bold;
}
	
uni-icons{
	margin-right: 25rpx;
}
</style>
